<template>
  <p>baseValue:{{ baseValue }}</p>
  <p>doubleValue:{{ doubleValue }}</p>
  <button @click="baseValueAdd">baseValue+1</button>
  <button @click="doubleValueAdd">doubleValueAdd</button>
</template>
<script>
import { ref, computed } from "vue";

export default {
  setup() {
    //可以使用computed创建一个计算属性，该 属性基于其它的响应式数据进行计算的
    const baseValue = ref(0);
    //接受一个 getter 函数，返回一个只读的响应式 ref 对象
    //Computed.vue:20 Write operation failed: computed value is readonly
    //默认情况下，通过computed创建的计算属性是只读的，但是你可以通过提供setter让它可写
    const doubleValue = computed({
        //它也可以接受一个带有 get 和 set 函数的对象来创建一个可写的 ref 对象
      get: () => {
        //因为在此getters中用到了baseValue,以后如果baseValue发生了变化了会重新计算
        //如果没有变量，重新访问的时候只会读取上次缓存的值
        console.log('重新计算doubleValue')
        return baseValue.value * 2;
      },
      set: (newValue) => {baseValue.value = newValue/2},
    });
    //该 ref 通过 .value 暴露 getter 函数的返回值、、
    console.log(doubleValue.value);
    const baseValueAdd = () => baseValue.value++;
    const doubleValueAdd = () => doubleValue.value+=2;
    //computed会自动跟踪计算函数中的任何响应式数据，当这些数据发生变化时，计算属性会重新计算
    return {
      baseValue,
      doubleValue,
      baseValueAdd,
      doubleValueAdd,
    };
  },
};
</script>
